<template>
  <div>
    <el-button type="primary" size="mini" round @click="dialogVisible = true">导入商品信息</el-button>
    <el-dialog
      title="导入商品信息excel文件"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="90%">

      <div>
        <el-row>
          <el-button type="primary" @click="exportExcel" round>下载excel模板</el-button>

          <el-upload
            :show-file-list="false"
            action="#"
            :auto-upload="false"
            style="display: inline-block"
            accept=".xls,.xlsx"
            :on-change="handleChange">
            <el-button type="primary" round>选择excel文件</el-button>
          </el-upload>
        </el-row>

        <div style="margin-top: 20px">
          <el-table ref="excelTable" :data="rowList" stripe style="width: 100%" max-height="800"
                    @selection-change="selectionChange">
            <el-table-column type="selection" fixed width="50">
            </el-table-column>
            <el-table-column type="index" show-overflow-tooltip label="序号" fixed width="50">
            </el-table-column>

            <el-table-column prop="goodsName" label="商品名称" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.goodsName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="categoryName" label="分类名称" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.categoryName" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="detailDesc" label="商品描述" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.detailDesc" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="thumbUrl" label="图片地址" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.thumbUrl" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="80">
              <template slot-scope="scope">
                <el-image v-show="scope.row.thumbUrl"
                          style="width: 50px; height: 50px;"
                          :src="scope.row.thumbUrl"
                          fit="fill"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="industry" label="行业" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.industry" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="brand" label="品牌" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.brand" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="manufacturer" label="厂家制造商" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.manufacturer" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="modelInfo" label="规格属性信息" min-width="200">
              <template slot-scope="scope">
                <el-input v-model="scope.row.modelInfo" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="marketPrice" label="售价" min-width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.marketPrice"
                  :min="0" :max="1000000"
                  :precision="2" :step="0.1"
                  size="small"
                  controls-position="right"
                  style="width: 140px"
                  placeholder="请输入内容"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.unit" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="storage" label="库存" min-width="160">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.storage"
                  :min="0" :max="100000"
                  size="small"
                  controls-position="right"
                  placeholder="请输入内容"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="scanCode" label="扫码条码" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.scanCode" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="modelUrl" label="规格图片地址" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.modelUrl" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="80">
              <template slot-scope="scope">
                <el-image v-show="scope.row.modelUrl"
                          style="width: 50px; height: 50px;"
                          :src="scope.row.modelUrl"
                          fit="fill"></el-image>
              </template>
            </el-table-column>
            <el-table-column prop="weight" label="重量(kg)" min-width="170">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.weight"
                  :min="0" :max="1000000"
                  :precision="3" :step="0.001"
                  size="small"
                  controls-position="right"
                  style="width: 150px"
                  placeholder="请输入内容"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="volume" label="体积(立方米)" min-width="170">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.volume"
                  :min="0" :max="10000"
                  :precision="6" :step="0.001"
                  size="small"
                  controls-position="right"
                  style="width: 150px"
                  placeholder="请输入内容"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="备注" min-width="160">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" placeholder="请输入内容"></el-input>
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="60">
              <template slot-scope="scope">
                <el-button @click="deleteRow(scope.row, scope.$index)" type="text"
                           size="small">移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <span slot="footer">
                <el-button type="primary"
                           :loading="btnFlag"
                           round
                           @click="submitInfo">确认导入
                </el-button>
            </span>
    </el-dialog>
  </div>
</template>

<script>
  import {goodsImport as infoImport} from '@/api/goods/import_info';
  import {getStore} from "@/util/store";

  export default {
    name: 'goodsImport',
    props: {
      inputShopId: {
        type: String,
        default() {
          return ''
        }
      }
    },
    data: function () {
      return {
        dialogVisible: false,
        closeFlag: false,
        btnFlag: false,
        // 行数据
        rowList: [{}],
        selectRowList: [],
        shopId: getStore({name: "shopId"}),
      }
    },
    created() {
    },
    computed: {},
    methods: {
      // 下载excel模板
      exportExcel() {
        window.open("/file/goods/商品信息导入模板.xlsx");
      },
      handleClose(done) {
        if (this.closeFlag) {
          this.$confirm('有未提交修改, 确认关闭?')
            .then(_ => {
              done();
            })
            .catch(_ => {
            });
        } else {
          done();
        }
      },
      //删除
      deleteRow(row, index) {
        this.rowList.splice(index, 1);
        if (this.rowList.length === 0) {
          this.rowList.push({});
          this.closeFlag = false;
        }
      },
      // 多选
      selectionChange(list) {
        this.selectRowList = list;
      },
      // 全选
      selectAll() {
        this.$refs.excelTable.toggleAllSelection();
      },
      // 处理excel文件
      handleChange(file) {
        this.closeFlag = true;
        this.selectRowList = [];
        let name = file.name;
        let type = name.substring(name.lastIndexOf('.')).toLowerCase();
        if (!(type === '.xls' || type === '.xlsx')) {
          this.$notify({
            title: '提示',
            message: '请选择Excel文件',
          });
          return;
        }
        // 表头 属性转换
        this.$export.xlsx(file.raw).then(data => {
          this.rowList = data.results.map((item) => {
            return {
              goodsName: item['商品名称'],
              categoryName: item['分类名称'],
              detailDesc: item['商品描述'],
              thumbUrl: item['图片地址'],
              industry: item['行业'],
              brand: item['品牌'],
              manufacturer: item['厂家制造商'],
              modelInfo: item['规格属性信息'],
              marketPrice: item['售价'],
              unit: item['单位'],
              storage: item['库存'],
              scanCode: item['扫码条码'],
              modelUrl: item['规格图片地址'],
              weight: item['重量(kg)'],
              volume: item['体积(立方米)'],
              remarks: item['备注']
            };
          });
          // 全选
          this.selectAll();
        })
      },
      // 提交导入信息
      submitInfo() {
        if (this.selectRowList.length) {
          this.btnFlag = true;
          infoImport({
            'goodsList': this.selectRowList,
            'shopId': this.inputShopId || this.shopId
          }).then(res => {
            this.$notify({
              title: '导入结果提示',
              dangerouslyUseHTMLString: true,
              message: res.data.data.replace(/[|]/g, '<br/>'),
              duration: 50000
            });
            this.closeFlag = false;
            console.log(this.closeFlag);
          }).catch(err => {
            this.$notify({
              title: '错误提示',
              message: err,
              duration: 50000
            });
          }).finally(() => {
            this.btnFlag = false;
          });
        } else {
          this.$notify({
            title: '导入提示',
            message: '请选择需导入的明细信息',
          });
        }
      },
    }
  }
</script>

<style scoped lang="scss">

</style>
